<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bfc</title>
    <style>
        .main {
            background-color: #ddd;
            overflow: hidden;
        }
        .main img {
            width: 300px;
            float: left;
        }
    </style>
</head>
<body>
    <!-- 解决高度塌陷和外边距重叠问题 -->
    <!-- 
    【透过现象看本质】
        1. BFC就是解决一些特性的HTMl标签
    【BFC是什么】
        1. BFC（Block Formatting Context）格式化上下文
        2. 指一个独立的渲染区域，或者说是一个隔离的单独容器
        3. 可以理解为一个独立的封闭空间，无论如何都不会影响它的外面
    【形成BFC的条件】
        1. 浮动元素，float除none以外的值
        2. 绝对定位元素，position(absloute fixed) 
        3. display 为其中之一的值(inline block, table-cell, table-caption, flex)
        4. overflow除了visiable以外的值(hiddlen, auto, scroll)
        5. body根元素
    【BFC的特性】
        1. 内部的box会在垂直方向上一个接一个的放置
        2. 垂直方向的距离由margin决定
        3. BFC的区域不会与float的元素区域重叠
        4. 计算BFC的高度时，浮动元素也参与计算
        5. BFC就是页面上的一个独立容器: 容器中的子元素不会影响外面的元素
     -->


     

     <!-- 这个时候main标签的高度就是一个BFC -->
     <div class="main">
         <img src="./image/abc.jpg" alt="">
     </div>
</body>
</html>
